<template>
  <div id="app">
    <div v-if="addImg">
      <el-upload
        class="my-uploadPic"
        :multiple="multiple"
        action="/uploadPics"
        list-type="picture-card"
        :auto-upload="false"
        :http-request="uploadFile"
        ref="uploadPic">
        <i class="el-icon-plus"></i>
      </el-upload>
    </div>
    <div>
      <center>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleAddSomePicsInfo = false">取 消</el-button>
                <el-button type="primary" @click="addSomePeoplePicsForm">下一步</el-button>
            </span>
      </center>
    </div>
  </div>
</template>

<script>
export default {
  name: "upload",
  data() {
    return {
      formPicsData: "",
      multiple: true,
      activity: {
        NoticeID: 1,
      },
      addImg: false,
    }
  },
  methods: {
    uploadFile(file) {
      this.formPicsData.append('files', file.file);
      // console.log(file.file)
      // console.log(this.formPicsData)
      // console.log(1)
    },
    addSomePeoplePicsForm: function () {
      let self = this;
      this.formPicsData = new FormData();
      this.formPicsData.append('content', "123")
      for (let key in this.activity) {
        this.formPicsData.append(key, this.activity[key])
      }
      console.log(this.formPicsData)
      // console.log(2)
      this.$refs.uploadPic.submit();
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      //this.$ajax.post这个地方需要在main.js进行简单配置
      this.$http.post("http://localhost:8080/uploadfileNotice", this.formPicsData, config).then(res => {
        //TODO：具体自己逻辑部分
        console.log(res)
      }).catch(res => {
        this.$message.info("服务器走丢了!");
      });
    },

  }
}
</script>

<style scoped>
.my-uploadPic /deep/ .el-upload--picture-card {
  height: 100px;
  width: 100px;
  line-height: 100px;
}
</style>
